<template>
    <div>
        <el-container>
            <el-header>
                <h2>小U商城后台管理系统</h2>
                <div class="user">
                    <h4>欢迎：{{ userInfo.username }}</h4>
                    <div>
                        <el-button :icon="Close" circle @click="exit"></el-button>
                    </div>
                </div>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
                        text-color="#fff" router :default-active="defaultActive" @open="handleOpen"
                        @close="handleClose">
                        <el-menu-item index="/home">
                            <el-icon>
                                <icon-menu />
                            </el-icon>
                            <span>首页</span>
                        </el-menu-item>
                        <el-sub-menu v-for="item in userInfo.menus" :key="item.id" :index="item.id.toString()">
                            <template #title>
                                <el-icon>
                                    <Cpu />
                                </el-icon>
                                <span>{{ item.title }}</span>
                            </template>
                            <el-menu-item v-for="menu in item.children" :key="menu.id" :index="menu.url">
                                {{ menu.title }}
                            </el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex';
import {
    Cpu,
    Menu as IconMenu,
    Close
} from '@element-plus/icons-vue'
import { Action, ElMessage, ElMessageBox } from 'element-plus';
import router from '@/router';
import { useRoute } from "vue-router"
const store = useStore()
const route = useRoute()
let defaultActive = ref("/home")
const handleOpen = (key: string, keyPath: string[]) => {
}
const handleClose = (key: string, keyPath: string[]) => {
}
const userInfo = computed(() =>
    store.getters["getUser"]
)
onMounted(() => {
    defaultActive.value = route.path
})
const exit = () => {
    ElMessageBox.confirm(
        '你确定要退出吗?',
        '提示',
        {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
        }
    )
        .then(() => {
            // 清除本地管理员信息
            sessionStorage.removeItem("userInfo")
            // 跳转到登录页
            router.push("/login")
        })
        .catch((action: Action) => {
            ElMessage({
                type: 'error',
                message: "取消退出"
            })
        })
}
</script>

<style scoped lang="less">
.el-container {
    .el-header {
        background-color: darkorange;
        color: #fff;
        display: flex;
        justify-content: space-between;

        .user {
            display: flex;

            h4 {
                color: #ffe862;
                margin-right: 20px;
            }

            div {
                margin-top: 15px;
            }
        }
    }

    .el-aside {
        .el-menu {
            height: 670px;
        }
    }

}
</style>
